<template>
	<view class="container">
		<view class="line"></view>
		<view class="detail-box" :style="{height:scrollviewHeight+'rpx'}">
			<scroll-view scroll-y="true" :style="{height:scrollviewHeight-30+'rpx'}" style="width: 100%;padding-top: 30rpx;">
			     <view class="detail-box-top">
			     	<view class="detail-title">
			     		<text class="work-title">徐州市招水电工</text>
						<text class="work-price">期望薪资：200元/天</text>
			     	</view>
					<view class="worker-avatarinfo">
						<image src="/static/avatar.jpg" mode="" class="worker-avatar"></image>
						<text>李阿晓</text>
					</view>
			     </view>
				 <view class="detail-box-bottom">
					 <view class="detail-item">
					 	<text class="detail-item-title">要求：</text>
						<text class="detail-item-value">认真、耐心、性格好，沟通方便，吃苦耐劳性格 好，沟通方便，吃苦耐劳认真、耐心、性格好，沟通方便，吃苦耐劳性格 好，沟通方便，吃苦耐劳认真、耐心、性格好，沟通方便，吃苦耐劳性格 好，沟通方便，吃苦耐劳</text>
					 </view>
					 <view class="detail-item">
					 	<text class="detail-item-title">地点：</text>
						<text class="detail-item-value">徐州市鼓楼区和兴广场</text>
					 </view>
				 </view>
				 <view class="uploaded-images">
				     <text class="uploaded-images-title">上传图片</text>
					 <view class="uploaded-images-list">
					 	<image src="/static/avatar.jpg" mode=""></image>
						<image src="/static/avatar.jpg" mode=""></image>
						<image src="/static/avatar.jpg" mode=""></image>
					 </view>
				 </view>
			</scroll-view>
		</view>
		<view class="call-worker">
			<view class="call-worker-box">
				<view class="left-btn">
					<text>立即咨询</text>
				</view>
				<view class="right-btn">
					<text>拨打电话</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollviewHeight:0
			}
		},
		created() {
			this.scrollviewHeight=uni.getSystemInfoSync().windowHeight/uni.getSystemInfoSync().windowWidth*750-195;
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 background-color: rgba(244, 248, 251, 1);
		 .line{width: 100%;height: 15rpx;background-color: rgba(244, 248, 251, 1);}
		 .detail-box{
			 width: 100%;
			 height: auto;
			 background-color: #fff;
			 .detail-box-top{
				 width: 680rpx;
				 height: auto;
				 margin: auto;
				 padding-bottom: 30rpx;
				 border-bottom: 1rpx solid #F1F1F1;
				 .detail-title{width: 100%;display: flex;justify-content: space-between;align-items: center;}
				 .work-title{font-size: 33rpx;flex: 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				 .work-price{color: rgba(255, 0, 0, 1);font-size: 26rpx;}
				 .worker-avatarinfo{
					 width: 680rpx;
					 margin: auto;
					 display: flex;
					 align-items: center;
					 height: auto;
					 .worker-avatar{width: 100rpx;height: 100rpx;border-radius: 10rpx;}
					 margin-top: 30rpx;
					 text{flex: 1;margin-left: 20rpx;font-size: 26rpx;}
				 }
			 }
			 .detail-box-bottom{
				 width: 680rpx;
				 margin: auto;
				 padding-top: 10rpx;
				 height: auto;
				 .detail-item{width: 100%;font-size: 28rpx;color: #222;margin-top: 20rpx;display: flex;}
				 .detail-item-value{flex: 1;}
				 padding-bottom: 30rpx;
				 border-bottom: 1rpx solid #F1F1F1;
			 }
			 .uploaded-images{
				 width: 680rpx;
				 margin: auto;
				 height: auto;
				 padding-top: 30rpx;
				 .uploaded-images-title{font-size: 28rpx;width: 100%;display: block;}
				 .uploaded-images-list{
					 width: 680rpx;
					 height: auto;
					 display: flex;
					 flex-wrap: wrap;
					 justify-content: space-between;
					 image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
					 margin-top: 50rpx;
				 }
			 }
		 }
		 .call-worker{
			 background-color: #fff;
			 width: 100%;
			 height: 120rpx;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 position: fixed;
			 bottom: 0rpx;
			 .call-worker-box{width: 680rpx;height: 100%;display: flex;justify-content: space-between;align-items: center;}
			 .left-btn{width: 320rpx;height: 90rpx;text-align: center;color: #FFFFFF;font-size: 26rpx;line-height: 90rpx;background-color: rgba(14, 174, 100, 1);border-radius: 10rpx;}
			 .right-btn{width: 320rpx;height: 90rpx;text-align: center;color: #FFFFFF;font-size: 26rpx;line-height: 90rpx;background-color: rgba(255, 158, 93, 1);border-radius: 10rpx;}
		 }
	 }
</style>
